import { Component, ReactNode } from "react";
import { Input, Picker, View, Text } from "@tarojs/components";
import { AtButton, AtList, AtListItem, AtNavBar } from "taro-ui";
import Taro from "@tarojs/taro";
import "./index.scss";
import { isEmpty } from "../../utils/kit";
import Req from "../../utils/request";

export default class PlanForm extends Component {
  state = {
    month: null,
    ratio: "",
    lid: "",
  };
  get planId() {
    const { router } = Taro.getCurrentInstance();
    return router?.params.planId;
  }
  get isProgress() {
    const { router } = Taro.getCurrentInstance();
    if (router?.params.current == "0") {
      return true;
    }
    return false;
  }
  componentDidShow() {
    const { router } = Taro.getCurrentInstance();
    const { lid = "", month = "", ratio = "" }: any = router?.params;
    this.setState({
      lid,
      month: (function () {
        if (month) {
          return parseFloat(month) - 1;
        }
        return null;
      })(),
      ratio,
    });
  }
  render(): ReactNode {
    const { month, ratio, lid }: any = this.state;
    return (
      <View className="planform-container">
        <AtNavBar
          leftIconType="chevron-left"
          leftText="返回"
          color="#3051BE"
          onClickLeftIcon={() => {
            Taro.navigateBack();
          }}
        >
          <View>{"计划明细"}</View>
        </AtNavBar>
        <AtList>
          <Picker
            value={month}
            onChange={(e) => {
              this.setState({
                month: e.detail.value,
              });
            }}
            range={[
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ]}
            mode="selector"
          >
            <AtListItem
              className="form-list-item form-label-required"
              title={"所属月份"}
              arrow="down"
              note={
                <View>
                  <Text>
                    {isEmpty(month) ? "请选择月份" : month + 1 + "月"}
                  </Text>
                </View>
              }
            />
          </Picker>
          <AtListItem
            className="form-list-item no-active-effect-item form-label-required"
            title={this.isProgress ? "进度(%)" : "支出(%)"}
            note={
              <View>
                <Input
                  value={ratio}
                  onInput={(e) => {
                    this.setState({
                      ratio: e.detail.value,
                    });
                  }}
                  placeholder="请输入计划值"
                />
              </View>
            }
          />
        </AtList>
        <AtButton
          className="primary-btn-color bottom-btn"
          circle
          type="primary"
          onClick={() => {
            let _url = "/project/plan/details/add";
            let paramObj = {
              planId: this.planId,
              month: month + 1,
              ratio: ratio,
            };
            if (!isEmpty(lid)) {
              _url = "/project/plan/details/edit";
              paramObj["id"] = lid;
            }

            if (isEmpty(month)) {
              Taro.showToast({
                title: "所属月份不能为空！",
                icon: "none",
                duration: 2000,
              });
              return false;
            }
            if (isEmpty(ratio)) {
              Taro.showToast({
                title: `${this.isProgress ? "进度" : "支出"}不能为空！`,
                icon: "none",
                duration: 2000,
              });
              return false;
            }

            Req.post(_url, { ...paramObj }).then((r) => {
              if (r.code === 200) {
                //刷新计划明细
                Taro.eventCenter.trigger("refreshLog", { force: true });
                const env = Taro.getEnv();
                if (env === Taro.ENV_TYPE.WEB) {
                  window.history.back();
                } else {
                  Taro.navigateBack();
                }
              }
            });
          }}
        >
          提交
        </AtButton>
      </View>
    );
  }
}
